<template>
  <div class="common-card">
    <div class="title">{{ title }}</div>
    <div class="chart">
      <!-- 图表部分插槽 -->
      <slot>未传入图表</slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    reqquired: true,
    type: String,
    default: '标题',
  },
})
</script>
<style lang="scss" scoped>
.common-card {
  width: 300px;
  height: 250px;
  margin: 20px 0;
  color: #fff;
  .title {
    width: 100%;
    height: 50px;
    background: url('@/assets/images/chart-item.png') no-repeat;
    background-size: cover;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
  }
  .chart {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(50, 103, 202, 0.8), rgba(10, 25, 57, 0.4));
    border-radius: 10px;
    padding: 10px;
    &::before,&::after{
      position: absolute;
      display: block;
      content: '';
      display: block;
      width: 110px;
      height: 35px;
      background: url('@/assets/images/border.png') no-repeat;
      background-size: cover;
    }
    &::before {
      left: -2px;
      top: -6px;
      transform: scale(-1) 
    }
    &::after {
      right: -2px;
      bottom: -6px;
    }
  }
}
</style>
